<template>
  <div class="current-plan">
    <van-nav-bar title="活期计划" left-arrow @click-left="goBack" @click-right="onClickRight">
      <i class="icon iconfont icon-zijinjilu icon-zj" slot="right"></i>
    </van-nav-bar>
    <van-tabs v-model="active">
      <!-- BTC -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <img
                style="width:25%; margin-right:4px"
                src="../../assets/images/icon-btc@2x.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="content">
          <div class="finbe">
            <div class="reta">
              {{$route.query.annualInterestRate}}
              <span class="small">%</span>
            </div>
            <router-link :to="{name: 'histroyYearRate'}" tag="div" class="today">
              今日年化利率
              <span>></span>
            </router-link>
            <div class="total">
              在投总额
              <span>0</span>BTC
            </div>
            <div class="column">
              <div class="income">
                <p class="title">累计收益（BTC）</p>
                <p class="number">0</p>
              </div>
              <div @click="history" class="income">
                <p class="title">昨日收益（BTC）></p>
                <p class="number">0</p>
              </div>
            </div>
            <div class="btn">
              <router-link :to="{name: 'turnOut'}" tag="div" class="turn-out">转出</router-link>
              <router-link :to="{name: 'shiftTo'}" tag="div" class="shift-to">转入</router-link>
            </div>
          </div>
        </div>
      </van-tab>
      <!-- USDT -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <img
                style="width:25%; margin-right:4px"
                src="../../assets/images/icon-usdt@2x.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="content">USDT</div>
      </van-tab>
      <!-- ETH -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <img
                style="width:25%; margin-right:4px"
                src="../../assets/images/icon-eth@2x.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="content">ETH</div>
      </van-tab>
      <!-- EOS -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <img
                style="width:25%; margin-right:4px"
                src="../../assets/images/icon-eos@2x.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="content">EOS</div>
      </van-tab>
    </van-tabs>
    <div class="bg"></div>
    <section class="features">
      <div class="title">产品亮点</div>
      <div class="bright-spot">
        <div class="icon-text">
          <div class="icon">
            <img src="../../assets/images/icon-acess.png" alt>
          </div>
          <div class="text">
            <p>每日计息</p>
            <p>灵活存期</p>
          </div>
        </div>
        <div class="icon-text">
          <div class="icon">
            <img src="../../assets/images/icon-risk.png" alt>
          </div>
          <div class="text">
            <p>超低风险</p>
            <p>收益稳健</p>
          </div>
        </div>
        <div class="icon-text">
          <div class="icon">
            <img src="../../assets/images/icon-account.png" alt>
          </div>
          <div class="text">
            <p>申请0费用</p>
            <p>快速到账</p>
          </div>
        </div>
      </div>
    </section>
    <div class="bg"></div>
    <section class="transaction">
      <div class="title">交易规则</div>
      <div class="into">
        <div class="head">转入</div>
        <div>T日18:00（北京时间）前转入，T+1日计息；</div>
        <div>T日18:00（北京时间）后转入，T+1日计息；</div>
      </div>
      <div class="out">
        <div class="head">转出</div>
        <div>T日18:00（北京时间）前转出，T日23:59前可到账；</div>
        <div>T日18:00（北京时间）后转出，T+1日23:59前可到账；</div>
      </div>
      <div class="tips">转入/转出均不收取费用</div>
    </section>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { NavBar, Tab, Tabs, Toast } from "vant";
import { coinPlan } from "../../axios/api.js";
export default {
    name:"currentPlan",
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast
  },
  data() {
    return {
      active: "",
      coinTypes: [],
      data: {
        token: window.sessionStorage["token"]
      }
    };
  },

  created() {

   
  
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //进入注册页
    onClickRight() {
      this.$router.push("/capitalRecord");
    },
    // 历史收益
    history(){
      this.$router.push("/history");
    }
  },
  
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
/deep/.van-tab {
  color: @base_textColor;
}
/deep/ .van-tabs__line {
  background-color: #ff976a;
}
/deep/ .van-tab--active {
  color: #ff976a;
}
/deep/ .van-tabs__wrap {
  position: relative;
}
/deep/ .van-hairline--bottom::after {
  border-bottom-width: 0;
}
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
}
/deep/ .van-tabs--line {
  padding-top: 0;
}
.current-plan {
  background: #fff;
  .icon-zj {
    font-size: 26px;
    vertical-align: middle;
  }
  .tabs {
    .tabs-item {
      img {
        vertical-align: middle;
        margin-top: -2px;
      }
    }
  }
  .content {
    background: #fff;
    .finbe {
      margin: 0 auto;
      width: 90%;
      .reta {
        margin-top: 0.8rem;
        font-size: 3em;
        color: #f2826a;
        .small {
          font-size: 0.6em;
        }
      }
      .today {
        margin: 5px 0;
        font-size: 12px;
        color: #969799f5;
        span {
          margin-right: 10px;
        }
      }
      .total {
        margin: 15px 0;
        font-size: 14px;
        color: #323233;
        span {
          margin: 0 5px;
        }
      }
      .column {
        display: flex;
        .income {
          flex: 1;
          line-height: 2;
          padding: 0 20px;
          font-size: 14px;
          .title {
            color: #969799f5;
          }
          .number {
            color: #323233;
          }
        }
      }
      .btn {
        display: flex;
        margin: 10px;
        div {
          flex: 1;
          margin: 0 20px;
          padding: 10px;
          border-radius: 20px;
          font-size: 14px;
          color: #fff;
        }
        .turn-out {
          background: #eac68d;
        }
        .shift-to {
          background: #d1a568;
        }
      }
    }
  }
  .bg {
    height: 10px;
    background: #f2f3f5;
  }
  .features {
    .title {
      text-align: left;
      font-size: 14px;
      font-weight: bold;
      color: #323233;
      border-bottom: 1px solid #ebedf0;
      background: #fff;
      padding: 10px;
    }
    .bright-spot {
      display: flex;
      padding: 10px 15px;
      .icon-text {
        flex: 1;
      }
      .text {
        margin: 5px 0;
        font-size: 14px;
        color: #323233;
      }
    }
  }
  .transaction {
    .title {
      text-align: left;
      font-size: 14px;
      font-weight: bold;
      color: #323233;
      border-bottom: 1px solid #ebedf0;
      background: #fff;
      padding: 10px;
    }
    .into,
    .out {
      text-align: left;
      padding: 5px 10px;
      font-size: 12px;
      color: #323233;
    }
    .head,
    .tips {
      font-weight: 700;
    }
    .tips {
      text-align: left;
      padding: 10px;
    }
  }
}
</style>
